<!--
 @description 帮助中心入口
 @fileName inddex.vue
 @author zengqiongying
 @created 2022/02/22 13:16:03
-->
<template>
  <div class="help-center-home">
    <Header fixed arrow />
    <div>
      <HelpNavFilter @change="handleChangePage">
        <List
          v-if="activePageId"
          ref="list"
          component-name="HelpNavFilter"
          :finished.sync="finished"
          :reset-fun="resetData"
          :load="load"
          :refresh="load"
        >
          <div v-for="(g,i) in list" :key="i" class="floor-group">
            <div class="group-title">
              <span class="name">{{ g.storeyName }}</span>
              <span v-if="g.storeyType==='content'" class="more" @click="handleToList(g)">
                更多
                <svg-icon icon-class="xiangyou" />
              </span>
            </div>
            <FloorItem :list="g.contentDTOList" :type="g.storeyType" :layout-type="g.layoutType" />
          </div>
        </List>
      </HelpNavFilter>
    </div>
  </div>
</template>

<script>

import Header from './components/Header'
import HelpNavFilter from './components/NavFilter'
import List from './components/List'
import FloorItem from './components/FloorItem/index'
import { getStoreysByPageId } from '@/apis/helpCenter'
export default {
  name: 'HelpCenterIndex',
  components: {
    HelpNavFilter,
    Header,
    List,
    FloorItem
  },
  data() {
    return {
      activePageId: '',
      list: [],
      finished: false
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.$on('refresh', this.resetPageData)
  },
  activated() {

  },
  beforeRouteLeave(to, from, next) {
    if (to.path.indexOf('/helpCenter') !== 0) {
      this.$removeKeepAliveCache(this)
    }
    next()
  },
  methods: {
    handleChangePage(val) {
      this.activePageId = val
      this.resetPageData()
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    async load(page, rows) {
      return getStoreysByPageId(this.activePageId).then(res => {
        this.list = res.data || []
        this.finished = true
      })
    },
    resetData() {
      this.list = []
    },
    handleToList(g) {
      this.$router.push({ name: 'HelpCenterList', query: { cate: g.categoryId }})
    }
  }
}

</script>
<style lang="less" scoped>
.help-center-home{
  min-height: 100vh;
  width: 100vw;
  background-color: #F5F6F7;
  padding-top: 44PX;
  box-sizing: border-box;
}
.floor-group{
  margin-bottom: 10px;
  background: #fff;
  .group-title{
    padding:15px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name{
      line-height: 20px;
      font-size: 16px;
      font-weight:bold;
      color: #333333;
      letter-spacing: 1px;
    }
    .more{
      width: 50px;
      height: 20px;
      background: #12B9A3;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      .svg-icon{
        font-size: 12px;
      }
    }
  }
}
</style>
